<template>
	<view class="head-bg"></view>
	<view class="page-content">
		<!-- 页面标题 -->
		<view class="page-title">
			<view class="title">用户注册</view>
			<view class="subtitle">创建新账号</view>
		</view>

		<!-- 注册表单卡片 -->
		<view class="register-card">
			<wd-form ref="formRef" :model="formData">
				<wd-cell-group border>
					<wd-input
						label="用户名"
						label-width="100px"
						prop="username"
						clearable
						v-model="formData.username"
						placeholder="请输入用户名"
						:rules="[{ required: true, message: '请填写用户名' }]"
					/>
					<wd-input
						label="邮箱"
						label-width="100px"
						prop="email"
						clearable
						v-model="formData.email"
						placeholder="请输入邮箱地址"
						:rules="[{ required: true, message: '请填写邮箱地址' }]"
					>
						<template #suffix>
							<view class="verify-code-container" :class="{ disabled: isCountDown }">
								<wd-count-down v-if="isCountDown" ref="countDown" :time="60000" format="ss" @finish="countDownFinish" />
								<text v-else @click="onStartSendEmail">获取验证码</text>
							</view>
						</template>
					</wd-input>
					<wd-input
						label="验证码"
						label-width="100px"
						prop="code"
						clearable
						v-model="formData.code"
						placeholder="请输入验证码"
						:rules="[{ required: true, message: '请输入验证码' }]"
					/>
					<wd-input
						label="密码"
						label-width="100px"
						prop="password"
						show-password
						clearable
						v-model="formData.password"
						placeholder="请输入密码"
						:rules="[{ required: true, message: '请填写密码' }]"
					/>
					<wd-input
						label="确认密码"
						label-width="100px"
						prop="confirmPassword"
						show-password
						clearable
						v-model="formData.confirmPassword"
						placeholder="请再次输入密码"
						:rules="[{ required: true, message: '请确认密码' }]"
					/>
				</wd-cell-group>
				<view class="footer">
					<wd-button type="primary" size="large" @click="handleSubmit" :loading="submitLoading" loading-color="#000" block>注册</wd-button>
					<view class="login-link">
						<text class="login-text">已有账号？</text>
						<text class="login-action" @click="goToLogin">立即登录</text>
					</view>
				</view>
			</wd-form>
		</view>

		<!-- 用户协议入口 -->
		<view class="agreement-section">
			<view class="agreement-text">
				注册即表示同意
				<text class="agreement-link" @click="openUserAgreement">《用户协议》</text>
				和
				<text class="agreement-link" @click="openPrivacyPolicy">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useUserStore } from '@/store/user';
import { baseAPI } from '@/api/index.js';

const userStore = useUserStore();

const formData = reactive({
	username: '',
	email: '',
	code: '',
	password: '',
	confirmPassword: ''
});

const formRef = ref();
const countDown = ref();
const isCountDown = ref(false);
const submitLoading = ref(false);

function handleSubmit() {
	formRef.value
		.validate()
		.then(({ valid }) => {
			if (valid) {
				// 验证密码一致性
				if (formData.password !== formData.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return;
				}

				submitLoading.value = true;
				baseAPI
					.post('auth/accountRegister', formData)
					.then((res) => {
						submitLoading.value = false;

						uni.showToast({
							title: '注册成功',
							icon: 'success'
						});

						if (res.code == 200) {
							setTimeout(() => {
								goToLogin();
							}, 1500);
						}
					})
					.catch((error) => {
						console.log('注册失败:', error);
						uni.showToast({
							title: '注册失败，请重试',
							icon: 'none'
						});
					});
			}
		})
		.catch((error) => {
			console.log('表单验证失败:', error);
		});
}

// 跳转到登录页面
function goToLogin() {
	uni.redirectTo({
		url: '/pages/user/account-login'
	});
}

// 打开用户协议
function openUserAgreement() {
	uni.showModal({
		title: '用户协议',
		content: '这里是用户协议的内容...',
		showCancel: false
	});
}

// 打开隐私政策
function openPrivacyPolicy() {
	uni.showModal({
		title: '隐私政策',
		content: '这里是隐私政策的内容...',
		showCancel: false
	});
}

function onStartSendEmail() {
	uni.showLoading({
		mask: true,
		title: '发送中 ...'
	});

	baseAPI.post('auth/sendEmailCode', {
		email: formData.email
	}).then((res) => {
		uni.hideLoading();
		if (res.code == 200) {
			isCountDown.value = true;
			countDown.value.start();
		}
	});
}

function countDownFinish() {
	isCountDown.value = false;
}
</script>

<style lang="scss" scoped>
.head-bg {
	width: 100%;
	height: 500rpx;
	position: absolute;
	background-image: linear-gradient(rgba($-color-theme, 0.5), #f5f5f5);
	z-index: 1;
}

.page-content {
	position: relative;
	z-index: 10;
	padding: 60rpx 30rpx 30rpx;
}

.page-title {
	text-align: center;
	margin-bottom: 80rpx;
	margin-top: 100rpx;

	.title {
		font-size: 48rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
}

.register-card {
	background-color: #fff;
	border-radius: $base-radius;
	padding: 60rpx 40rpx;
	margin-bottom: 40rpx;

	.footer {
		margin-top: 60rpx;
	}

	.login-link {
		text-align: center;
		margin-top: 30rpx;

		.login-text {
			font-size: 28rpx;
			color: #666;
		}

		.login-action {
			font-size: 28rpx;
			color: #1989fa;
			margin-left: 10rpx;
		}
	}
}

.agreement-section {
	text-align: center;
	padding: 30rpx 40rpx;

	.agreement-text {
		font-size: 24rpx;
		color: #999;
		line-height: 1.5;

		.agreement-link {
			color: #1989fa;
		}
	}
}

// 验证码相关样式
.verify-code-container {
	background-color: $-color-theme;
	color: #000;
	padding: 12rpx 24rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 500;
	min-width: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	&.disabled {
		background-color: unset;
	}
}
</style>
